<template>
  <div>
    <mini-head :title="$route.name" />
    <div class="container">
        <van-form @submit="onSubmit">
          <van-field
            v-model="contact.linkMan"
            name="用户名"
            label="用户名"
            placeholder="请填写用户名"
            :rules="[{ required: true}]"
          />
          <van-field
            v-model="contact.mobile"
            type="tel"
            name="电话"
            label="电话"
            placeholder="请填写电话"
            :rules="[{ required: true}]"
          />
           <van-field
            v-model="areaStr"
            @click-input="showArea=true"
            @confirm="choseArea"
            :area-list="areaList"
            type="tel"
            name="地区"
            label="地区"
            placeholder='选择省/市/区'
            readonly
            :rules="[{ required: true}]"
          />
           <van-field
            v-model="contact.address"
            type="tel"
            name="详细地址"
            label="详细地址"
            placeholder="街道门牌，楼层房间号等信息"
            :rules="[{ required: true}]"
          />
           <van-field
            v-model="contact.code"
            type="tel"
            name="详细地址"
            label="邮政编码"
            placeholder="邮政编码"
            :rules="[{ required: true}]"
          />
          <van-cell center title="是否为默认地址">
            <template #right-icon>
              <van-switch v-model="contact.isDefault" size="24" />
            </template>
          </van-cell>
          <div style="margin: 16px;">
            <van-button round block size="large" type="danger" native-type="submit">保存</van-button>
          </div>
        </van-form>
        <van-popup v-model="showArea" position="bottom" :style="{ height: '55%' }" >
            <van-area
            title="标题"
            @confirm="choseArea"
            :value="areaStr"
            :area-list="areaList"
            :columns-placeholder="['请选择', '请选择', '请选择']"
          />
          </van-popup>
    </div>
  </div>
</template>

<script>
import MiniHead from '../../components/MiniHead.vue'
// 联动数据包要下载
import { areaList } from '@vant/area-data'
import { addContact } from '../../api/index'
import { getToken } from '../../utils/index'
import { Toast } from 'vant'
export default {
  data () {
    return {
      areaList, // 省市县联动数据
      showArea: false, // 下弹框显示和隐藏数据
      areaStr: '', // 省市县详细数据
      contact: {
        show: false,
        isDefault: false, // 是否为默认地址数据
        address: '', // 详细地址数据
        linkMan: '', // 收货人用户名数据
        mobile: '', // 收货人电话数据
        code: '' // 邮政编码数据
      }
    }
  },
  components: { MiniHead },
  methods: {
    onSubmit (values) {
      // 新增联系人了
      addContact({
        ...this.contact,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast.success({
            message: '增加联系人成功',
            duration: 2000,
            onClose: () => {
              // 需要判断跳转到此页面之前的页面，然后跳回去
              this.$router.go(-1)
              // this.$router.replace('/contactLists')
            }
          })
        }
      })
    },
    choseArea (params) {
      // 省市区三级联动确认
      const areaStrs = []
      params.forEach(area => {
        areaStrs.push(area.name)
      })
      this.areaStr = areaStrs.join('/')
      this.contact.provinceId = params[0].code
      this.contact.cityId = params[1].code
      this.showArea = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
    margin-top: 1.5rem;
}
.van-cell{
  padding: 20px 15px;
}
.van-button--info{
  background-color: #f55637;
}

</style>
